/**
 * Created by lihao on 15/4/20.
 */

var WidgetIndex = 0;
var Widgets = {

    data: {},
    imageIndex: 1,
    SlidesControl: {
        imageData: [],
        loadImageData: function () {
            var that = this;
            var imageChildren = $("#topBackImageData").children();
            for (var i = 0; i < imageChildren.length; i++) {
                var imageData = $(".imageData").eq(i);
                var backImage = imageData.attr("backSrc");
                var frontImage = imageData.attr("frontSrc");
                that.imageData[i] = {
                    backImage: backImage,
                    frontImage: frontImage
                }
            }
            Widgets.data = that.imageData;
        },
        preImage: function () {
            var that = this;
        },
        nextImage: function () {
            var that = this;
        }
    },

    BackSlidesControl: {
        imageData: [],
        loadImageData: function () {
            var that = this;
        },
        preImage: function () {
            var that = this;
        },
        nextImage: function () {
            var that = this;
        }
    },

    animation: function () {
        var that = this;
    },
    timeAnimation: function () {
        var that = this;
    },
    event: function () {
        var that = this;
        WidgetIndex = 0;

        $("#topHeadImgPre").on("click", function (e) {
            console.log(Widgets.data[WidgetIndex]);
            $("#topBackImageView").css("opacity", "1");
            $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).css("opacity", "0");
            WidgetIndex = WidgetIndex - 1;

            //循环现实
            if (WidgetIndex < 1) {
                WidgetIndex = Widgets.data.length;
            }

            $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).animate({opacity: "1"}, {speed: 1000});
            $("#topBackImageView").animate({opacity: "1"}, {speed: 500});
            $("#topBackImageView").css("background-image", "url('" + Widgets.data[(WidgetIndex - 1 ) % 3].backImage + "')");
            $("#topFrontImageView").attr("src", Widgets.data[(WidgetIndex - 1 ) % 3].frontImage);
            that.setHeadImageDot((WidgetIndex - 1 ) % 3);
        });

        $("#topHeadImgNext").on("click", function (e) {
            console.log(Widgets.data[WidgetIndex]);
            $("#topBackImageView").css("opacity", "1");
            $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).css("opacity", "0");
            WidgetIndex = WidgetIndex + 1;
            console.log()
            $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).animate({opacity: "1"}, {speed: 1000});
            $("#topBackImageView").animate({opacity: "1"}, {speed: 500});
            $("#topBackImageView").css("background", "url('" + Widgets.data[(WidgetIndex - 1) % 3].backImage + "') no-repeat center");
            $("#topFrontImageView").attr("src", Widgets.data[(WidgetIndex - 1 ) % 3].frontImage);
            console.log("WidgetIndex % 3 - 1 : " + (WidgetIndex - 1 ) % 3);
            that.setHeadImageDot((WidgetIndex - 1 ) % 3);
        });

        $("#headImageDot").on("click", "a", function (e) {
            var dotIndex = $(e.target).attr("index");
            that.setHeadImageDot(dotIndex);
            that.setFrontImage(dotIndex);
        });
    },

    setFrontImage: function (dotIndex) {
        $("#topBackImageView").css("opacity", "1");
        $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).css("opacity", "0");
        WidgetIndex = dotIndex + 1;
        $(".frontImageDD").eq((WidgetIndex - 1 ) % 3).animate({opacity: "1"}, {speed: 1000});
        $("#topBackImageView").animate({opacity: "1"}, {speed: 500});
        $("#topBackImageView").css("background", "url('" + Widgets.data[(WidgetIndex - 1 ) % 3].backImage + "') no-repeat center");
        $("#topFrontImageView").attr("src", Widgets.data[(WidgetIndex - 1 ) % 3].frontImage);
    },

    setHeadImageDot: function (i) {
        var clDot = $("#headImageDot").children();
        for (var j = 0; j < clDot.length; j++) {
            $(clDot[j]).removeClass("on");
        }
        $(clDot[i]).addClass("on");
        console.log("index:" + i);
        WidgetIndex
    }
};

$(document).ready(function () {
    Widgets.SlidesControl.loadImageData();
    Widgets.event();
    Widgets.setFrontImage(0);
});